<template>
  <view class="goods-introduce" :style="[goodsIntroduceCss]">
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view class="introduce-section">
      <view class="introduce-header">
        <view class="price-section">
          <view class="price-box">
            <view class="price" v-if="!goodsInfo.is_negotiable">
              <template v-if="!goodsInfo.min_price || goodsInfo.min_price <= 0">
                <text>{{ goodsInfo.integral_price }}积分</text>
              </template>
              <template v-else>
                <text
                  >{{ goodsInfo.integral_price }}积分 + {{ goodsInfo.min_price }}元</text
                >
              </template>
            </view>
            <view class="price" v-else>
              <text></text>
              <text>{{ $t("diy.negotiable") }}</text>
              <text></text>
            </view>
            <view
              v-if="showMemberPrice && goodsInfo.is_level"
              class="origin-price"
            >
              <span>¥{{ goodsInfo.min_member_price }}</span>
              <image class="member-price-img" :src="asyncImgs.goods.vipicon" />
            </view>
            <!-- {{showOriginPrice}} -->
            <view v-if="parseFloat(goodsInfo.original_price)" class="old-price"
              >¥{{ goodsInfo.original_price }}</view
            >
          </view>
          <view class="integral-box" v-if="goodsInfo.integral.give">
            赠送{{ goodsInfo.integral.give }}积分
          </view>
          <view class="integral-box" v-if="goodsInfo.confine_count">
            限购{{ goodsInfo.confine_count }}件
          </view>
          <view class="integral-box" v-if="goodsInfo.integral.forehead">
            积分最多抵扣{{ goodsInfo.integral.forehead }}元
          </view>
        </view>
        <view class="share-section">
          <p class="sale-num">
            已兑
            {{ (goodsInfo.sales || 0) + " " + goodsInfo.unit }}
          </p>
          <!--#ifndef MP-ALIPAY-->
          <view class="share-box" @click="shareGoods">
            <i class="iconfont icon-share"></i>
            <span>{{ $t("goods.share") }}</span>
          </view>
          <!--#endif-->
        </view>
      </view>
      <view class="goods-name">{{ goodsInfo.name }}</view>
      <!-- <view class="goods-virtues" v-if="goodsInfo.service_list.length">
        <view
          class="goods-virtues-item"
          v-for="(item, index) in goodsInfo.service_list"
          :key="index"
        >
          <span></span>
          <p>{{ item }}</p>
        </view>
      </view> -->
      <!-- <view class="goods-grey-text">
        2英寸彩屏，可外放，高品质录音，正负8级变速播放，电子书/ 歌词显示
      </view> -->
    </view>
  </view>
</template>

<script>
import { diySysPageMixin } from "@/components/diySystemPage/mixins/index.js";

export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    goodsInfo: {
      type: Object,
      default: {},
    },
  },
  mixins: [diySysPageMixin],
  components: {},
  data() {
    return {};
  },
  mounted() {
  },
  watch: {},
  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    },
  },
  computed: {
    showMemberPrice() {
      return false;
    },
    showOriginPrice() {
      return this.propsData.params.showOriginPrice;
    },
    goodsIntroduceCss() {
      if (!this.propsData) return {};
      let style = Object.assign({}, this.propsData.moduleCss);
      if (style.margin) style.margin = `0 0 ${style.margin * 2}rpx 0`;
      if (style.padding) style.padding = `0 ${style.padding * 2}rpx`;
      if (style.borderRadius)
        style["borderRadius"] = `${style.borderRadius * 2}rpx`;
      let obj = {
        margin: style.margin,
        borderRadius: style.borderRadius,
        padding: style.padding,
        position: "relative",
        overflow: "hidden",
      };
      return obj;
    },
  },
  methods: {
    // 点击分享
    shareGoods() {
      this.$emit("shareGood");
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-introduce {
  width: 100%;
  position: relative;
  font-family: PingFang SC;
  .introduce-section {
    width: 100%;
    padding: 2.67vw 0 5.33vw 4.8%;
    .introduce-header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .price-section {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-direction: column;
        .price-box {
          display: flex;
          flex-direction: column;
          align-items: baseline;
          .price {
            display: flex;
            align-items: flex-end;
            font-size: 40rpx;
            font-weight: 600;
            color: #f8260a;
            line-height: 56rpx;
          }
          .origin-price {
            font-size: 28rpx;
            font-weight: 600;
            color: #232326;
            margin-left: 16rpx;
            .member-price-img {
              width: 60rpx;
              height: 24rpx;
              margin-left: 6rpx;
            }
          }

          .old-price {
            font-size: 28rpx;
            font-weight: 400;
            color: #8c8c8c;
            text-decoration: line-through;
          }
        }
        .integral-box {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #f8260a;
          margin-top: 8rpx;
        }
      }
      .share-section {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        .price-bottom-text {
          font-size: 24rpx;
          color: #f8260a;
        }
        .sale-num {
          font-size: 22rpx;
          font-weight: 400;
          color: #8c8c8c;
          padding-right: 4.8vw;
          margin-bottom: 0;
          display: flex;
          justify-content: flex-end;
        }

        .share-box {
          width: 19.2vw;
          height: 7.46vw;
          background: #fdf1f0;
          border-radius: 3.73vw 0 0 3.73vw;
          justify-content: center;
          align-items: center;
          display: flex;
          margin-top: 1.86vw;
          .iconfont {
            font-size: 38rpx;
            color: #f8260a;
          }
          span {
            font-size: 24rpx;
            color: #262626;
            margin-left: 4rpx;
          }
        }
      }
    }
    .goods-name {
      padding-right: 4.8vw;
      font-size: 32rpx;
      font-weight: 600;
      color: #262626;
      margin-top: 2.67vw;
      word-break: break-all;
    }
    .goods-virtues {
      display: flex;
      align-items: center;
      margin-top: 4rpx;
      .goods-virtues-item {
        display: flex;
        align-items: center;
        span {
          width: 4rpx;
          height: 4rpx;
          border-radius: 50%;
          background-color: #262626;
          display: inline-block;
        }
        p {
          font-size: 24rpx;
          color: #262626;
          margin-bottom: 0;
          margin-left: 1.33px;
          margin-right: 1.6vw;
        }
      }
    }
    .goods-grey-text {
      margin-top: 3.2vw;
      padding-right: 4.8vw;
      font-size: 24rpx;
      font-weight: 400;
      color: #8c8c8c;
      word-break: break-all;
    }
  }
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
